<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
</head>
<body>

  <div id='app'>
    <div class="container">
      <div class="main" style="max-width: 600px; margin-top:30px">
        <input type="text" style="padding-left: 5px;" placeholder="商品名称" v-model="addItem.itemName">
        <input type="text" style="padding-left: 5px;" placeholder="商品价格" v-model="addItem.itemPrice">
        <input type="text" style="padding-left: 5px;" placeholder="商品数量" v-model="addItem.itemNum">
        <button 
          class="btn btn-success btn-xs" 
          @click="addItemClick"
          >增加</button>
        <table style="margin-top: 20px;" class="table table-bordered table-striped table-hover table-condensed">
          <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>小计</th>
            <th>操作</th>
          </tr>
          <tr 
            v-for="(item, index) in items"
            :key="index">
            <td>
              <input type="checkbox"
                @change="singleCheck" 
                v-model="item.checked">
              {{item.itemName}}
            </td>
            <td>
              ￥ {{parseFloat(item.itemPrice.toFixed(2))}}
            </td>
            <td>
              <button 
                @click="reduceNum(index)" 
                class="btn btn-xs">-</button>
              {{item.itemNum}}
              <button 
                @click="addNum(index)"
                class="btn btn-xs">+</button>
            </td>
            <td>
              ￥ {{parseFloat((item.itemPrice * item.itemNum).toFixed(2))}}
            </td>
            <td>
              <button 
                @click="removeItem(index)" 
                class="btn btn-danger btn-xs">删除</button>
            </td>
          </tr>
          <tr>
            <td>
              <input type="checkbox"
               @change="allCheck" 
               v-model="isAllChecked">
              全选
            </td>
            <td colspan="4">
              总价格：￥ {{total}}
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>

<script src='https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js'></script>
<script>
  const app = new Vue({
    el: '#app'
    ,data:{
      items: [
        {
          itemName: '商品1'
          ,checked: true
          ,itemPrice: 10.33
          ,itemNum: 2
        },
        {
          itemName: '商品2'
          ,checked: true
          ,itemPrice: 15.89
          ,itemNum: 4
        },
        {
          itemName: '商品3'
          ,checked: true
          ,itemPrice: 16.23
          ,itemNum: 8
        },
        {
          itemName: '商品4'
          ,checked: true
          ,itemPrice: 18.32
          ,itemNum: 9
        }
      ]
      ,total: 0
      ,isAllChecked: true
      ,addItem: {
        itemName: ''
        ,checked: true
        ,itemPrice: ''
        ,itemNum: ''
      }
    }
    ,mounted () {
      // 在页面渲染完毕后自动调用，只在初始的时候调用一次，刷新时不会再调用
      this.calcTotal();
    }
    ,methods: {
      calcTotal () {
        /*
          所有选中商品的 数量 * 单价 总和
        */
        this.total = 0
        const checkItems = this.items.filter( item => item.checked )
        checkItems.forEach(el => {
          this.total += el.itemNum * el.itemPrice
        })
        this.total = parseFloat(this.total.toFixed(2))
      }
      ,addNum (index) {
        this.items[index].itemNum ++
        this.calcTotal();
      }
      ,reduceNum (index) {
        this.items[index].itemNum --
        if(this.items[index].itemNum <= 1) {
          this.items[index].itemNum = 1
        }
        this.calcTotal()
      }
      ,singleCheck(){
        /*
          判断是否所有的商品都被选中的，如果不是，取消全选，否则，选中全选
        */
        this.isAllChecked = this.items.every( item => item.checked )
        this.calcTotal()
      }
      ,allCheck(){
        // 改变全选状态 取消商品选中
        this.items.forEach( el => { el.checked = this.isAllChecked } )
        this.calcTotal()
      }
      ,removeItem(index) {
        this.items.splice(index, 1);
        this.calcTotal()
      }
      ,addItemClick() {
        this.items.push({
          itemName: this.addItem.itemName
          ,checked: true
          ,itemPrice: parseFloat(this.addItem.itemPrice)
          ,itemNum: parseInt(this.addItem.itemNum)
        })
        this.addItem.itemName = this.addItem.itemPrice = this.addItem.itemNum = ''
        this.calcTotal()
      }
    }
  })
</script>
</body>
</html>